<template>
  <div class="share-code">
    <div class="invitation-code-top" :style="{ width: '100%', height: wrapHeight + 'px'}">
      <div class="people">
        <img :src="invitationCode.pic" width="65" height="65">
      </div>
      <p class="new-news">{{invitationCode.name}}送你{{invitationCode.coin}}喵币</p>
    </div>
    <div class="main-info">
      <p class="content-topic">邀请码</p>
      <p class="invitation-code">{{invitationCode.inviteCode}}</p>
      <p class="beautiful-words">手机抓娃娃，直邮即到家<br>超萌主题房，领走小可爱<br>一起来玩吧~喵~</p>
    </div>
    <div class="download">
      <div class="download-img">
        <img class="down-wrap" src="../assets/picture/wrap-download.png" width="340" height="65">
        <img class="down-btn" src="../assets/picture/download.png" width="40" height="40">
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'invitation',
    data () {
      return {
        wrapHeight: document.documentElement ? document.documentElement.clientWidth * 0.784 : document.body.clientWidth * 0.784,
        invitationCode: {}
      }
    },
    mounted () {
      this.invitation()
    },
    methods: {
      invitation () {
        console.log()
        this.$http({
          method: 'post',
          url: 'https://likewawa.com/miaozhua/v1/outlin/inviteAppDetail',
          body: {'userId': this.$utils.getQueryStringByName('userId')},
          headers: {},
          emulateJSON: true
        }).then(function (response) {
          response = JSON.parse(response.bodyText)
          this.invitationCode = response.invite
        }, function () {
          console.log('稍后重试')
        })
      }
    }
  }
</script>

<style scope lang="scss">
  $p-color: #000000;
  $p-fontSize: 16px;
  .share-code{
    .invitation-code-top{
      background: url(../assets/picture/invitationCode-back.png) no-repeat;
      background-size: 100% 100%;
      .people{
        display: table;
        margin: 0 auto 20px;
        img{
          display: inherit;
          border-radius: 50%;
          margin-top: 52px;
        }
      }
      .new-news{
        font-size: $p-fontSize;
        color: $p-color;
        text-align: center;
      }
    }
    .main-info{
      padding-bottom: 155px;
      p.content-topic{
        font-size: $p-fontSize;
        color: $p-color;
        text-align: center;
        line-height: $p-fontSize;
        margin: 5px 0 0;
      }
      .invitation-code{
        font-size: 45px;
        font-weight: bold;
        color: #ffdf58;
        text-align: center;
        margin: 25px 0 32px;
      }
      .beautiful-words{
        font-size: 18px;
        color: #1e1e1b;
        text-align: center;
        line-height: 36px;
      }
    }
    .download{
      position: fixed;
      bottom: 0;
      width: 100%;
      background: #ffffff;
      z-index: 9;
      .download-img{
        display: table;
        position: relative;
        margin: 0 auto;
        padding-bottom: 10px;
        img{
          display: inherit;
        }
        .down-btn{
          position: absolute;
          right: 17px;
          top: 50%;
          transform: translateY(calc(-50% - 10px));
        }
      }
    }
  }
</style>
